<template>
    <a-row>
        <a-col :span="12">
            <a-card size="small" title="按日期统计区域内机械数量">
                <a-row>
                    <a-col :span="12">
                        <a-date-picker v-model="leftTime"/>
                        <a-button style="margin-left: 10px;" type="primary"
                                  @click="getMachineNumByArea">统计
                        </a-button>
                    </a-col>

                    <a-col offset="8" span="4">
                        <!--                        <a-button>-->
                        <!--                            <a-icon type="upload"/>-->
                        <!--                            导出-->
                        <!--                        </a-button>-->
                    </a-col>

                </a-row>

            </a-card>


            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="leftChartBox" :style="{height: echartsHeight + 'px',backgroundColor: 'white'}"></div>

            <a-table
                :columns="[{title: '区域', key: 'name', dataIndex: 'name'}, {title: '数量', key:'value', dataIndex: 'value',scopedSlots: {customRender: 'value'}}]"
                :data-source="leftChartData"
                :pagination="false"
                rowKey="name" style="background-color: white">

                <div slot="value" slot-scope="value">
                    <span>{{ value + '辆' }}</span>
                </div>

            </a-table>
        </a-col>

        <a-col :span="12">
            <a-card size="small" style="margin-left: 4px" title="按分类统计区域内机械数量">
                <a-row>
                    <a-col span="12">
                        <a-date-picker v-model="rightTime"/>
                        <a-button style="margin-left: 10px;" type="primary"
                                  @click="getMachineNumByType">统计
                        </a-button>
                    </a-col>

                    <a-col offset="8" span="4">
                        <!--                        <a-button>-->
                        <!--                            <a-icon type="upload"/>-->
                        <!--                            导出-->
                        <!--                        </a-button>-->
                    </a-col>

                </a-row>

            </a-card>

            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="rightChartBox" style="height:300px; background-color: white; margin-left: 4px"></div>

            <a-table
                :columns="[{title: '机械分类', key: 'name', dataIndex:'name'}
                , {title: '数量', key:'value',dataIndex:'value', scopedSlots: {customRender: 'value'}}]"
                :data-source="rightChartData"
                :pagination="false" rowKey="id" style="background-color: white">

                <div slot="value" slot-scope="value">
                    <span>{{ value + '辆' }}</span>
                </div>
            </a-table>

        </a-col>
    </a-row>
</template>

<script>
import {use} from "echarts/core";
import {CanvasRenderer} from "echarts/renderers";
import {PieChart} from "echarts/charts";
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from "echarts/components";
import * as echarts from "echarts";
import {METHOD, request, RESPONSE} from "@/utils/request";
import moment from "moment";
import {white} from "mockjs/src/mock/random/color_dict";
import {nextTick} from "vue";

use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
]);

export default {
    computed: {
        white() {
            return white
        }
    },
    components: {},
    data() {
        return {
            leftChartData: null,
            rightChartData: null,
            leftChart: null,
            rightChart: null,
            leftTime: null,
            rightTime: null,
            echartsHeight: 300
        };
    },
    mounted() {
        this.userID = JSON.parse(localStorage.getItem(process.env.VUE_APP_USER_KEY)).id;

        // 绘制图表
        this.leftChart = echarts.init(document.getElementById('leftChartBox'))
        this.rightChart = echarts.init(document.getElementById('rightChartBox'))
        // 指定图表的配置项和数据
        let option = {
            //标题
            title: {
                text: '日统计结果',
                x: 'center',              //标题位置
                // textStyle: { //标题内容的样式
                //   color: '#000',
                //   fontStyle: 'normal',
                //   fontWeight: 100,
                //   fontSize: 16 //主题文字字体大小，默认为18px
                // },
            },
            // stillShowZeroSum: true,
            //鼠标划过时饼状图上显示的数据
            toolbox: {
                left: 'left',
                show: true,
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        show: true,
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}:{c} ({d}%)'
            },
            //图例
            legend: {           //图例  标注各种颜色代表的模块
                orient: 'vertical',//图例的显示方式  默认横向显示
                // bottom: 10,  //控制图例出现的距离  默认左上角
                left: 'right',  //控制图例的位置
                top: '20',      //图例组件离容器上侧的距离。
                // itemWidth: 16,//图例颜色块的宽度和高度
                // itemHeight: 12,
                textStyle: {    //图例中文字的样式
                    color: '#000',
                    fontSize: 12
                },
                data: ['未领取', '处理中', '已完成']//图例上显示的饼图各模块上的名字
            },
            //饼图中各模块的颜色
            // color: ['#32dadd', '#b6a2de', '#5ab1ef'],
            // 饼图数据
            series: {
                // name: 'bug分布',
                type: 'pie',             //echarts图的类型   pie代表饼图
                radius: '46%',           //饼图中饼状部分的大小所占整个父元素的百分比
                center: ['38%', '50%'],  //整个饼图在整个父元素中的位置
                // data:''               //饼图数据
                data: [                  //每个模块的名字和值
                    {name: '未领取', value: 10},
                    {name: '处理中', value: 30},
                    {name: '已完成', value: 50}
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                            // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                            //标签内容格式器
                            formatter: '{b}: {c}辆'  // {a}：系列名。{b}：数据名。{c}：数据值。{d}：百分比。
                        },
                        labelLine: {
                            show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                        }
                    }
                },
            }

        };
        // 使用刚指定的配置项和数据显示图表。
        this.leftChart.setOption(option);
        this.rightChart.setOption(option);

        // 初始化两个chart完成，进入界面就查询一次当天数据
        this.getMachineNumByArea();
        this.getMachineNumByType();
    },
    methods: {
        getMachineNumByType() {
            let timeStr = this.rightTime != null ? moment(this.rightTime).format("YYYY-MM-DD") : moment().format("YYYY-MM-DD");

            request("/position/getPositionByCname?id=" + this.userID +
                "&time=" + timeStr, METHOD.GET).then(res => {
                if (res.data.code === RESPONSE.SUCCESS_CODE) {
                    this.rightChartData = res.data.data;
                    // 刷新右边饼图
                    this.refreshDataOfChart(this.rightChart, res.data.data, timeStr)
                }
            })
        },
        getMachineNumByArea() {
            console.log(this.leftTime);
            let timeStr = this.leftTime != null ? moment(this.leftTime).format("YYYY-MM-DD") : moment().format("YYYY-MM-DD");
            request("/position/getPosition?id=" + this.userID +
                "&time=" + timeStr, METHOD.GET).then(res => {
                if (res.data.code === RESPONSE.SUCCESS_CODE) {
                    // 更新底部表格数据
                    this.leftChartData = res.data.data;
                    // 刷新左边饼图
                    this.refreshDataOfChart(this.leftChart, res.data.data, timeStr)
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        /**
         * @param {null} chart 图表对象
         * @param {*} data 图表数据
         * @param {string} timeStr 时间字符串
         */
        refreshDataOfChart(chart, data, timeStr) {
            const size = data.length - 11;
            if (size > 0) {
                this.echartsHeight = 300 + size * 30;
            }

            console.log(this.echartsHeight);
            // get data
            let option = chart.getOption();

            // 更新饼图的标题文字
            option.title[0].text = timeStr + "日统计结果";
            // 清空图例
            console.log(option.legend);
            option.legend[0].data = [];
            // 添加图例
            for (let item of data) {
                if (item.name != null) {
                    option.legend[0].data.push(item.name);
                }
            }
            // 设置图标数据
            option.series[0].data = data;

            // console.log(option);

            // 更新数据
            chart.setOption(option);
            nextTick(() => {
                chart.resize()
            })
        }
    }
};
</script>

<style lang="less" scoped>
.chart {
    height: 100vh;
}

</style>
